<template>
  <div class="home">
    <NavBar defaultActive="/notebook" />
    <Content>
      <div slot="bread" class="bread">
        <el-breadcrumb>
          <el-breadcrumb-item>最新信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <ArticleItem
        slot="articleItem"
        v-for="(item, index) in articles"
        :key="item + index"
        :article="item"
      ></ArticleItem>
    </Content>
    <Foot />
  </div>
</template>

<script>
import NavBar from "./../components/common/NavBar";
import Content from "./../components/common/Content.vue";
import ArticleItem from "./../components/content/index/ArticleItem";
import Foot from "./../components/common/Footer";
import "element-ui/lib/theme-chalk/display.css";
export default {
  data() {
    return {
      name: "nuxt.js",
      articles: [1, 2, 3, 4, 5]
    };
  },
  components: {
    NavBar,
    Content,
    ArticleItem,
    Foot
  },
  asyncData(context) {
    return { name: "小明" };
  }
};
</script>
<style></style>
<style soped>
.home {
  background-color: rgb(246, 246, 246);
  min-height: 100vh;
}
.bread {
  margin: 20px;
}
</style>
